
<template>
	<div>
		<div class="componentsIcon" @mouseenter="componentsIconEnter" @mouseleave="componentsIconLeave">
			<a-tooltip placement="right" color="white" :overlayInnerStyle="{ width: '500px',maxHeight:'500px',overflowY:'scroll' }">
				<template #title>
					<span>
						<ComponentCollapse :lf="props.lf"
						:config="props?.config"
						></ComponentCollapse>
					</span>
				</template>

				<Icon>
					<template #component>
						<svg
							t="1725161977481"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="5165"
							:width="componentsIconConfig.width"
							:height="componentsIconConfig.height"
						>
							<path
								d="M64 64h384v384H64V64z m0 512h384v384H64V576z m512 0h384v384H576V576z m192-128c106.039 0 192-85.961 192-192S874.039 64 768 64s-192 85.961-192 192 85.961 192 192 192z"
								p-id="5166"
								fill="#1296db"
							></path>
						</svg>
					</template>
				</Icon>
			</a-tooltip>
		</div>
	</div>
</template>

<script setup>
import Icon from '@ant-design/icons-vue'
import ComponentCollapse from './componentCollapse.vue'

const props = defineProps(['lf','config'])

const componentsIconConfig = ref({
	width: 30,
	height: 30
})
const componentsIconEnter = () => {
	componentsIconConfig.value.width = 50
	componentsIconConfig.value.height = 50
}
const componentsIconLeave = () => {
	componentsIconConfig.value.width = 30
	componentsIconConfig.value.height = 30
}
</script>


<style scoped lang="less">
.componentsIcon {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}
</style>
